<template>
  <section class="hero-section-wrapper hero-section-wrapper-1">
  <div class="hero-section hero-style-1">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="hero-content-wrapper">
            <h2>JackPay让支付接入更简单</h2>
            <p class="fw-bold">1个API实现多种支付方式, 无缝对接你的支付业务. JackPay 让你的收入明细更清晰, JackPay让支付触手可得(注:本网站属于Demo, 支付均为测试网, 正式请查看接入文档)</p>
            <a href="#0" class="getBtn">接 入   文 档</a>
            <a href="#0" class="getBtn">GitHub源码</a>
          </div>
        </div>
        <div class="col-lg-6 align-self-end">
          <div class="hero-image">
            <img src="https://cdn.iextend.top/pay/home/hero-img.svg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="shapes">
      <img src="https://cdn.iextend.top/pay/home/shape-1.svg" alt="" class="shape shape-1">
      <img src="https://cdn.iextend.top/pay/home/shape-2.svg" alt="" class="shape shape-2">
      <img src="https://cdn.iextend.top/pay/home/shape-3.svg" alt="" class="shape shape-3">
      <img src="https://cdn.iextend.top/pay/home/shape-4.svg" alt="" class="shape shape-4">
    </div>
  </div>
  </section>

  <section id="features" class="feature-section feature-style-3">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xxl-5 col-xl-5 col-lg-7 col-md-8">
          <div class="section-title text-center mb-5">
            <h3>JackPay, 让复杂的事情变简单</h3>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>支付控制台</h5>
              <p>让数据更加清晰, 支持流水对账, 数据汇总, 账户系统管理,动动手即可设置提现汇率等</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>支付方式</h5>
              <p>支持支付方式:如支付宝,微信,Stripe[信用卡],银联, Paypal,在未来甚至会接入Web3</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>快速部署</h5>
              <p>采用容器化部署方案, 让部署更为快捷, 源码开源免费,让你也能拥有属于自己的支付网关!!!</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>接入支付</h5>
              <p>注册后,申请api key, 并在apiKey管理页面中可以看到调用详情, 让支付触手可得</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>接入指引</h5>
              <p>更多详细文档指引, 让支付变得更加简单, 有问题请发邮箱至: 2324504517@qq.com</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-feature">
            <div class="icon">
              <img src="https://cdn.iextend.top/pay/favicon.svg" alt="">
            </div>
            <div class="content">
              <h5>更多项目</h5>
              <p>在未来也许会有更多项目,在这介绍哈, 真不知道在这写什么了</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



</template>

<script  setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { NCarousel } from "naive-ui";

</script>

<style>

.feature-style-3 {
  background: #ffffff;
  padding: 10px 0;
}

.feature-style-3 .single-feature {
  padding: 30px 35px;
  border-radius: 10px;
  margin-bottom: 40px;
  margin-top: 30px;
  box-shadow: 0px 5px 25px rgba(218, 211, 211, 0.8);
}

.feature-style-3 .single-feature .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: -60px;
}

.footer-style-4 .widget-wrapper .footer-widget .download-app li a .icon {
  font-size: 35px;
  color: #323450;
  margin-right: 12px;
}

.feature-style-3 .single-feature .content h5 {
  font-weight: 600;
  margin-bottom: 25px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  color: #323450;
  margin-bottom: 0;
  font-family: "Fira Sans", sans-serif;
}
h2, .h2 {
  font-size: 60px;
  letter-spacing: .7px;
}
.getBtn {
  font-size: 18px;
  font-weight: 500;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #2F80ED;
  color: #ffffff;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
  padding: 0 25px;
  margin: 0 10px;
  overflow: hidden;
  height: 64px;
  border-radius: 10px;
  text-decoration: none;
}

.getBtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  padding: 50%;
  margin: auto;
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
  transition: all .4s linear;
  transform: translate3d(-50%, -50%, 0) scale(0);
}

.getBtn:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(1.5);
}

.hero-section-wrapper-1 {
  background: #ffffff;
  position: relative;
}

.hero-section-wrapper-1 .header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: transparent;
}

.hero-section-wrapper-1 .header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.hero-section-wrapper-1 .hero-style-1 {
  position: relative;
  z-index: 1;
}

.hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper {
  padding: 160px 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper {
    padding: 160px 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper {
    padding: 160px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper {
    padding: 120px 0 ;
  }
}

@media (max-width: 767px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper {
    padding: 120px 0 ;
  }
}

.hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper h2 {
  margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper h2 {
    font-size: 55px;
    line-height: 65px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper h2 {
    font-size: 47px;
    line-height: 58px;
  }
}

@media (max-width: 767px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper h2 {
    font-size: 40px;
    line-height: 50px;
  }
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper h2 {
    font-size: 47px;
    line-height: 58px;
  }
}

.hero-section-wrapper-1 .hero-style-1 .hero-content-wrapper p {
  font-weight: 500;
  margin-bottom: 50px;
}

.hero-section-wrapper-1 .hero-style-1 .hero-image {
  margin-bottom: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-image img {
    max-width: 100%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-image img {
    max-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-image img {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .hero-section-wrapper-1 .hero-style-1 .hero-image img {
    max-width: 100%;
  }
}

.hero-section-wrapper-1 .hero-style-1 .shapes .shape {
  position: absolute;
  z-index: -1;
}

.hero-section-wrapper-1 .hero-style-1 .shapes .shape.shape-1 {
  right: 0;
  bottom: 0;
  height: 100%;
}

.hero-section-wrapper-1 .hero-style-1 .shapes .shape.shape-2 {
  top: 200px;
  left: 49%;
}

.hero-section-wrapper-1 .hero-style-1 .shapes .shape.shape-3 {
  left: 15%;
  bottom: 120px;
}

.hero-section-wrapper-1 .hero-style-1 .shapes .shape.shape-4 {
  left: 0;
  bottom: 5%;
}

</style>






